<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="flex-row-between"
			style="height: 100rpx;position: fixed;top:0;width: 100%;left: 20rpx;background-color: white;">

			<view
				style="color:#9CA3AF ;width:60vw;height: 70rpx;background-color: #E5E7EB;border: 1px solid #E5E7EB;border-radius: 8rpx;"
				class="flex-row-center" @click="show=true">
				{{ selectDateStr }}
			</view>
			<view class="flex-row-event"
				style="height: 70rpx;width: 30vw;background-color: #E5E7EB;border-radius: 8rpx;">

				<view style="border-radius: 8rpx;height: 68rpx;width: 68rpx;"
					:class="['flex-row-center',{selected:selectIndex==1}]" @click="this.selectIndex = 1">日</view>
				<view style="border-radius: 8rpx;height: 68rpx;width: 68rpx;"
					:class="['flex-row-center',{selected:selectIndex==2}]" @click="yearClick">年</view>
				<view style="border-radius: 8rpx;height: 68rpx;width: 68rpx;"
					:class="['flex-row-center',{selected:selectIndex==3}]" @click="monthClick">月</view>

			</view>
			<view class="">
				<dateRangePicker :show="show" :minYear="2022" @close="show=false" @confirm="confirm">
				</dateRangePicker>
			</view>
		</view>

		<!-- list -->
		<view class="list-box" v-if="incomeList.length>0">

			<view v-for="(m,n) in incomeList" :key="n"
				style="background-color: #F9FAFB;width: 100%;height: 138rpx;display: flex;border-radius: 6px; flex-direction: row;align-items: center;padding: 12rpx;box-sizing: border-box;margin-bottom: 16rpx;justify-content: space-between;">
				<view
					style="display: flex;justify-content: space-evenly;align-items: flex-start;flex-direction: column;height: 100%;">
					<text style="font-size: 28rpx;color: #111827;">收益</text>
					<text style="color: #6B7280;font-size: 28rpx;">{{m.time}}</text>
				</view>

				<view class=""
					style="color: #FF4D4F;font-size: 24rpx;display: flex;justify-content: flex-end;align-items: center;">
					{{m.money}}
				</view>

			</view>

			<view class="loading-text">-没有更多了-</view>
		</view>

		<view v-else class="flex-colum-center" style="height: 60vh;">
			<image src="../../static/img/product/noData.png" style="width: 150rpx;height: 150rpx;"></image>
			<text style="color: gray;">无数据.....</text>
		</view>


	</view>
</template>

<script>
	import dateRangePicker from '@/components/date-range-picker/date-range-picker.vue'

	import {
		time7
	} from "@/js_sdk/fl-SOtime/SOtime.js"

	export default {
		components: {
			dateRangePicker
		},
		data() {
			return {
				selectDate: [time7(), time7()],
				show: false,
				searchKey: '',
				selectIndex: 1,
				incomeList: [
					// {
					// time: "2025-08-01 12:00:00",
					// money: "123.00"
					// }
				],

				page: 1,
				size: 10,
			};
		},
		filters: {
			getStatus: function(s) {

			},

		},
		computed: {
			selectDateStr: function() {
				if (this.selectDate.length > 0) {
					var arr = this.selectDate.join(",");
					return arr.replace(",", " 至 ")
				} else {
					return "请选择日期范围"
				}
			}
		},
		onLoad() {
			this.getMyIncome()
		},
		onReachBottom() {
			
			this.getMyIncome()
		},
		
		methods: {
			init() {
				this.page = 1;
				this.size = 10;
				this.incomeList = [];
			},
			confirm(e) {

				console.log(e);
				this.selectDate = e;
				this.getMyIncome()

			},
			monthClick() {
				this.selectIndex = 3;

				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				this.selectDate = [y + "-" + m + "-01", y + "-" + m + "-31"];
				this.getMyIncome();

			},
			yearClick() {
				this.selectIndex = 2;
				var date = new Date();
				var y = date.getFullYear();
				this.selectDate = [y + "-01-01", y + "-12-31"];
				this.getMyIncome();

			},

			getMyIncome() {
				let that = this;
				var param = {
					page: this.page,
					size: this.size,
					start_at: this.selectDate[0] == undefined ? "" : this.selectDate[0],
					end_at: this.selectDate[1] == undefined ? "" : this.selectDate[1]
				}
				this.$pin.request('GET', '/commission_payout/income', param,
					successData => {
						if(successData.code = this.$pin.code.success){
							
							var records = successData.data;
							if(records.length>0){
								that.incomeList = that.incomeList.concat(records);
								this.page++;
							}else{
								uni.showToast({
									title: '没有更多数据',
									icon: 'none'
								})
							}
							
						}

					},
					failData => {
						console.log(failData)
						uni.showToast({
							icon: 'none',
							title: '加载信息时出错'
						})
					}
				)
			}

		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 20rpx 3vw 20rpx;
		box-sizing: border-box;
		background-color: rgb(255, 255, 255);

		.selected {
			background-color: red;
			color: white;
		}


		.itemDetail {
			width: 100%;
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1px solid #C8C7CC;

			text {
				margin-right: 20px;
			}
		}

		.list-box {
			width: 100%;
			margin-top: 100rpx;

			.list-item {
				display: flex;
				height: 120rpx;
				justify-content: space-between;
				align-items: center;

				.item-left {
					display: flex;
					height: 90rpx;
					width: 20%;


				}

				.item-right {
					width: 100rpx;
					height: 50rpx;
					background-color: #7BBF6D;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 50rpx;
					border-radius: 10rpx;

				}

			}

		}
	}
</style>